<script setup lang="ts">
import { useRouter } from 'vue-router'
const props = defineProps<{
  title?: string
  rightText?: string
  back?: () => void // 父传子传递一个函数
}>()

const emits = defineEmits<{
  (e: 'clickRight'): void
}>()
const clickRight = () => {
  // 发布定义事件, 让父组件来决定点击右侧按钮做什么事情
  emits('clickRight')
}
const router = useRouter() // 路由实例  等价于 vue2中 this.$router(在模板结构中是可以使用的)
// 左箭头回退
const clickLeft = () => {
  if (props.back) return props.back()
  // console.log(history.state.back)
  // 如果有历史记录再回退, 没有历史记录直接去首页
  if (history.state.back) {
    router.back()
  } else {
    router.push('/')
  }
}
</script>
<template>
  <van-nav-bar
    left-arrow
    :title="title"
    :right-text="rightText"
    @click-right="clickRight"
    @click-left="clickLeft"
    fixed
  />
</template>

<style scoped lang="scss">
:deep(.van-nav-bar__arrow) {
  color: var(--cp-text1);
}
:deep(.van-nav-bar__title) {
  font-weight: 400;
  font-size: 14px;
}
</style>
